
<template>
  <div class="page-container">
    <el-form ref="form" :model="form" :label-width="$globalCss.formLabelWidth_default" :rules="formRules"
      v-loading="loading" label-position="right" class="common-form-panel-div">

      <ex_header_spiler :title="$t('label_base_info')"></ex_header_spiler>

      <el-row>
        <el-col>
          <el-form-item :label="$t('label_place_name')" prop="placeName">
            <ex_super_input v-model="form.placeName" maxlength="20" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item :label="$t('label_place_abb')" prop="placeAbb">
            <ex_super_input v-model="form.placeAbb" maxlength="20" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item :label="$t('label_place_belong')" prop="placeBelong">
            <ex_super_input v-model="form.placeBelong" type="select" class="w_fill" enum="PlaceBelongEnum" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item :label="$t('label_place_type')" prop="placeType">
            <ex_super_input v-model="form.placeType" type="select" class="w_fill" enum="PlaceTypeEnum" @change="placeTypeChange" :listHandler="list=>list.filter(item=>item!=='SERVICE_OUTLET')"/>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item v-if="form.placeType==='ECOMMERCE_AREA'" :label="$t('label_ec_platform')" prop="platformName">
            <ex_super_input
            v-model="form.platformName"
            type="el-autocomplete"
            class="w_fill"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="regionCustomSelectType">
        <el-row>
          <el-col>
            <el-form-item :label="$t('label_country')" prop="countryCode">
              <!-- 根据后台需求 添加一个url查询数据 -->
              <country_select v-model="form.countryCode" @changeItem="e => form.countryName = e ? e.countryName : null"
                url="/tms-api/base/TmsCountryRpc/selectCountry.json"
                class="w_fill" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item :label="$t('label_province')" prop="province">
              <ex_super_input v-model="form.province" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item :label="$t('label_city')" prop="city">
              <ex_super_input v-model="form.city" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('label_county')" prop="county">
              <ex_super_input v-model="form.county" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item :label="$t('label_post_code')" prop="postalCode">
              <ex_super_input v-model="form.postalCode" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item>
              <el-button type="primary" @click="regionCustomSelectType = false">{{
                regionCustomSelectType ? $t('label_switch_standard_select') :
                $t('label_switch_custom_select')
              }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row v-if="!regionCustomSelectType">
        <el-col :span="2">
          <el-form-item :label="$t('label_region')" prop="countryCode">
            <cascader_address_select class="w_fill" url="/tms-api/base/TmsCountryRpc/selectCountry.json" :countryCode.sync="form.countryCode" v-if="cascaderAddress"
              :countryName.sync="form.countryName" :province.sync="form.province" :city.sync="form.city"
              :county.sync="form.county" :zipCode.sync="form.postalCode" :checkStrictly="isArea" />
          </el-form-item>

        </el-col>
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="regionCustomSelectType = true">{{
              regionCustomSelectType ? $t('label_switch_standard_select') :
              $t('label_switch_custom_select')
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <template v-if="!isArea">
        <el-row>
          <el-col :span="2">
            <el-form-item :label="$t('label_detail_address')" prop="address">
              <ex_super_input v-model="form.address" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('label_contact')">
              <ex_super_input v-model="form.contacts" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item :label="$t('label_contact_phone')">
              <ex_super_input v-model="form.contactNumber" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col>
            <el-form-item :label="$t('label_lon')" prop="centreLon">
              <ex_super_input v-model="form.centreLon" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item :label="$t('label_lat')" prop="centreLat">
              <ex_super_input v-model="form.centreLat" />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <el-form-item >
        <span>
          <el-button type="primary" @click="submit" :loading="submiting" :disabled="submiting">{{ $t('label_save')
          }}</el-button>
          <el-button @click="pageBack">{{ $t('label_fms_account_config_cancel') }}</el-button>
        </span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import router_params from '@/mixin/router_params';
import cascader_address_select from '@/component/tms/cascader_address_select'
import country_select from '@/component/tms/country_select'

let defaultObj = {
  // id: null,//long
  placeName: null,//	string 	地点名称
  placeAbb: null,//	string 	地点简称
  placeType: null,//	PlaceTypeEnum 	DISTRIBUTION_AREA:配送区域, DISTRIBUTION_POINT:配送点, TRANSIT_POINT:中转点, PICK_UP_POINT:提货点, COMPREHENSIVE_POINT:综合点, STATION:车站, AIRDROME:机场, PORT:港口
  ownerId: null,//	long 	地点归属id
  ownerName: null,//	string 	地点归属名称
  regionId: null,//	long 	所属区域id
  regionName: null,//	string 	所属区域名称
  ownerCity: null,//	string 	所属城市
  province: null,//	string 	起点省份
  city: null,//string 	起点市
  county: null,//	string 	起点区
  town: null,//	string 	起点镇/街道
  address: null,//	string 	起点地址
  postalCode: null,//	string 	邮编
  centreLon: null,//	bigdecimal 	中心点经度
  centreLat: null,//	bigdecimal 	中心点纬度
  scopeLonLatList: null,//	array<object> 	区域类型的经纬度范围
  lon: null,//	bigdecimal 	经度
  lat: null,//	bigdecimal 	纬度
  sort: null,//	integer 	所处的位置
  countryCode: null,//	string 	国家编码
  countryName: null,//	string 	国家名称
  radius: null,//bigdecimal 	半径（单位m）
  regionType: null,//	RegionTypeEnum 	CIRCULAR:圆, POLYGON:多边形
  contacts: null,//string 	联系人
  contactNumber: null,//	string 	联系电话
  platformName:null,// 平台名称
  placeBelong:null,//地点归属
}
export default {
  name: 'place_operate',
  mixins: [router_params],

  components: { cascader_address_select, country_select },
  data() {
    return {
      regionCustomSelectType: false,
      cascaderAddress: false,
      edit: false,
      loading: false,
      submiting: false,
      form: _.cloneDeep(defaultObj),
      formRules:{
      placeName: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          placeAbb: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          placeType: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'change' },
          countryCode: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          province: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          city: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          // county: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          address: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          postalCode: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          centreLon: [
            { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
            { pattern: /^-?((0|[1-9]\d?|1[0-7]\d)(\.\d{1,6})?|180(\.0{1,6})?)$/, message:this.$t('label_lonreg_msg') }
          ],
          centreLat:[
            { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
            {pattern: /^-?((0|[1-8]\d?)(\.\d{1,6})?|90(\.0{1,6})?)$/, message:this.$t('label_latreg_msg'), trigger: 'blur' }
          ],
          platformName: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
          placeBelong: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'change' },

      }
    };
  },
  computed: {
    isArea() {
      return this.form.placeType == 'LINE_AREA' ||
        this.form.placeType == 'DISTRIBUTION_AREA' ||
        this.form.placeType == 'SOLICITING_REVENUE'
    },

  },


  methods: {
    init_data_default(params) {
      if (params.edit) this.edit = params.edit
      if (this.edit) {
        if (params.id) {
          this.loading = true
          this.$ajax({
            url: "/tms-api/base/TmsPlaceInfoRpc/detail.json",
            method: 'post',
            data: { id: params.id },
            success: (res) => {
              this.loading = false
              this.form = Object.assign({}, _.cloneDeep(defaultObj), res.data)

              this.$emit("tagModifyLabel", { _key: 'title_edit_place', code: this.form.placeName || "" })
              this.$nextTick(() => {
                this.cascaderAddress = true
              })
            }
          })
        }

        this.$emit("tagModifyLabel", { _key: 'title_edit_place', code: this.$t("tip_loading") })

      } else {
        this.cascaderAddress = true

        this.$emit('tagModifyLabel', "title_create_place")
      }
    },

    pageBack() {
      this.$tag.tagClose(null, this.intoPath)
    },

    submit() {
      if (this.$clickFast()) return
      this.$refs['form'].validate((valid, obj) => {

        if (valid) {
          this.submiting = true
          this.$ajax({
            url: "/tms-api/base/TmsPlaceInfoRpc/saveUpdate.json",
            method: 'post', type: 'json',
            loading: true,
            data: this.form,
            success: (res) => {
              this.$message.success(this.$t('tip_submit_success'))
              this.return_emit(null, "reload")
              this.pageBack()
            },
            complete: () => {
              this.submiting = false
            }
          })

        } else {
          this.$message.error(this.$t('form_validate_error'))
          return false;
        }
      });

    },
    querySearch(queryString, cb) {
        var restaurants = [];
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      },
      // 变更地点类型时 清空地点数据
      placeTypeChange(){
        this.form.countryCode=''
        this.form.countryName=''
        this.form.province=''
        this.form.city=''
        this.form.county=''
        this.form.postalCode=''
        this.form.address=''
      }
  }
};

</script>
<style></style>
